@import './base.scss';

.login-main {
  padding: 40px;
  box-sizing: border-box;

  .title {

    img {
      height: 47px;
    }

    .title-text {
      margin-top: 8px;

      img {
        width: 30px;
        height: 1px;
        vertical-align: middle;
        margin-left: 5px;
      }

      img:first-child {
        transform: rotate(180deg);
        margin-left: 0;
        margin-right: 5px;
      }
    }
  }

  .login-box {
    margin-top: 20px;

    ul {
      height: 30px;
      margin: 0 auto;

      li {
        flex: 1;
        line-height: 30px;
        font-weight: bold;
        color: #999;
      }

      li:first-child::before {
        content: '';
        position: absolute;
        right: -5px;
        top: 9px;
        background-color: #ccc;
        width: 1px;
        height: 42%;
      }

      li.active {
        color: #333;
      }

      li.active::after {
        content:'';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        background: #3D7EFF;
        border-radius: 1px;
      }
    }

    .centent {
      margin-top: 20px;

      .sub-title {
        margin-top: 24px;
      }

      .input-p {
        height: 40px;
        line-height: 40px;


        input {
          border: none;
        }

        input.phone {
          text-indent: 10px;
        }

        input::-webkit-input-placeholder{
          color: #ccc;
        }
      }

      .options {
        margin-top: 10px;
      }
    }
  }

  .btn-register {
    margin-top: 64px;
  }
}

@media screen and (max-width: 320px) {
  .login-main {
    .centent {

      .code-input {
        width: 60%;
      }
    }
  }
}
